<template>
  <!-- 最外层定义一个全局类 -->
  <div class="mod-grid">
    <el-card header="新增员工" shadow="always">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-card class="article-card">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="工号" prop="userId">
                <el-input v-model="dataForm.userId" placeholder="请输入工号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="dataForm.mobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
              <el-form-item label="服务时间" prop="serviceTime">
                <el-time-select
                  v-model="dataForm.serviceTime"
                  :picker-options="{start: '08:30', step: '00:15', end: '18:30'}"
                  placeholder="选择时间">
                </el-time-select>
              </el-form-item>
            </el-col>

          </el-row>
        </el-card>

        <el-card class="article-card" body-style="text-align:center;">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </el-card>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  // import {isEmail, isMobile} from '@/utils/validate'
  import validate from '@/utils/validator'

  export default {
    /**
     * 上面导入的是验证规则和验证器
     * 如果不导入验证器，则可以手工编写验证器，如下所示（开启所有注释掉的行）
     * 如果已经导入验证规则和验证器，则可以直接定义数据规则（参见89行）
     * 目前采用导入的验证器进行验证
     */

    data () {
      // var userIdValidate = (rule, value, callback) => {
      //   if (value) {
      //     this.$http.request(this.api.exampleGridInfo + '?id=' + value).then(res => {
      //       if (res.code === 0 && res.data.userId != null) {
      //         callback(new Error('此工号已经存在'))
      //       }
      //     })
      //   }
      // }
      // var validateEmail = (rule, value, callback) => {
      //   if (value && !isEmail(value)) {
      //     callback(new Error('请输入正确的邮件地址'))
      //   } else {
      //     callback()
      //   }
      // }
      // var validateMobile = (rule, value, callback) => {
      //   if (value && !isMobile(value)) {
      //     callback(new Error('请输入正确的手机号'))
      //   } else {
      //     callback()
      //   }
      // }
      return {
        dataRule: {
          userId: [
            {required: true, message: '员工编号不能为空', trigger: 'blur'}
            // {validator: userIdValidate, trigger: 'blur'}
          ],
          email: [
            {required: true, message: '邮件地址不能为空', trigger: 'blur'},
            {validator: validate.validateEmail, trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {validator: validate.validateMobile, trigger: 'blur'}
          ]
        },
        dataForm: {
          id: 0,
          serviceTime: '20:30'
        }
      }
    },
    methods: {
      dataFormSubmit () {
        console.log('提交表单')
        this.$refs['dataForm'].validate((valid) => {
          console.log(valid)
          if (valid) {
            console.log('可以提交')
            console.log(this.dataForm)
          } else {
            console.log('不可以提交')
          }
        })
      },
      resetForm () {
        console.log('重置表单')
        this.$refs['dataForm'].resetFields()
      }
    }
  }
</script>
<style scoped>
  .article-card {
    margin-bottom: 10px;
  }
</style>
